require('@/public.js');
require('@/assets/css/slider.css');
require('@/assets/css/number-tombstone.scss');
require('./index.css');
import { getWindowWidthAndHeight, debounce } from '@/utils/utils';

Jsborya.ready(function () {


	var app = new Vue({
		el: '#app',
		data: {
			slide: {//待优化
				h: '75px',
				w: 0,
				autoplay: true,
				timer: 0,
				p: { x: 0, y: 0, time: 0, off: !0, index: 0 },
				style: {
					transform: 'translate3d(0px,0px,0px)',
					transitionDuration: '0ms'
				},
				color: ['#FF754A', '#100875', '#100875', '#6531BA', '#480377'],
				imgUrl: [
					'https://kmsdk.m10027.com:446/xiniu/img/bannerWXSKsolicitude0515.png',
					'https://kmsdk.m10027.com:446/xiniu/img/shanghu_yongjing90.png',
					// 'https://kmsdk.m10027.com:446/xiniu/img/yuantel_yiqing.png',
					// 'https://kmsdk.m10027.com:446/xiniu/img/yuantel_yiqing2.png',
					'https://kmsdk.m10027.com:446/xiniu/img/xinglingshou167.jpg',
					'https://kmsdk.m10027.com:446/xiniu/img/zunxiangsuixingpei.jpg',

					'https://kmsdk.m10027.com:446/xiniu/img/wuxianshikong-0429.jpg'
				]//js加载完再加载图片
			},
			headerHeight: '100px',//header外补白高度
			userInfo: '',
			off: {
				load: false,
				listLoad: false,//号码数据加载完必
				scrollIndex: 0,//消息滚动index
				showOrder: false,
				setHeader: false,//是否已设置过头部
			},
			occupyNum: 0,//预占号码的总个数
			occupyList: [],
			quanyiList: [],
			hotList: [],
			surmiseList: [],
			messageList: [],
			phoneActList: []
		},
		created: function () {
			Jsborya.webviewLoading({ isLoad: false });//关闭app加载层
		},
		mounted: function () {
			const vm = this;

			vm.removeStore('SELECT_RULE');
			vm.removeStore('SELECT_INFO');
			vm.removeStore('SELECT_CITY');
			vm.removeStore('CHANGE_PACKAGE_INFO');
			Jsborya.getUserInfo(function (data) {
				vm.userInfo = data;

				vm.getData();
			});
			vm.initSlide();
		},
		methods: {
			getData: function () {//获取号码数据
				const vm = this;

				const json = {
					params: {
						occupySize: 0,
						hotSize: 3,
						surmiseSize: 0,
						phoneActSize: 3,
						quanyiSize: 4,
					},
					userInfo: vm.userInfo
				};

				let phoneList = vm.getStore('PHONE_LIST'),
					now = new Date().getTime();
				if (phoneList && now - phoneList.timestamp < 10 * 1000) {//10s内
					vm.hotList = phoneList.hotList;
					vm.phoneActList = phoneList.phoneActList;
					vm.quanyiList = phoneList.quanyiList;

					vm.intervalGetMessage();
					return;
				}

				vm.off.load = true;
				vm.AJAX('/eas/w/searchcard/facePhoneList', json, function (data) {
					vm.off.listLoad = true;

					// vm.occupyNum = data.data.occupyNum;
					vm.hotList = data.data.hotList;
					vm.phoneActList = data.data.phoneActList;
					vm.quanyiList = data.data.quanyiList;
					vm.setStore('PHONE_LIST', {
						hotList: data.data.hotList,
						quanyiList: data.data.quanyiList,
						phoneActList: data.data.phoneActList,
						timestamp: new Date().getTime()
					})

					// vm.intervalOccupy(data.data.occupyList);
					vm.intervalGetMessage();
				});
			},
			intervalGetMessage () {//消息循环获取
				const vm = this;

				vm.off.load = true;
				clearInterval(window.MessageTimer);

				const doIt = function () {
					let len = vm.messageList.length;
					const json = {
						params: {
							time: 0,
							size: 30,
						},
						userInfo: vm.userInfo
					};

					let messageList = vm.getStore('MESSAGE_LIST'),
						now = new Date().getTime();
					if (messageList && now - messageList.timestamp < 10 * 1000) {//10s内
						vm.messageList = messageList.list;

						return;
					}

					vm.AJAX('/eas/w/searchcard/xnNotice', json, function (data) {
						if (data.data.infoList.length) {
							vm.messageList = vm.messageList.concat(data.data.infoList);
							vm.setStore('MESSAGE_LIST', {
								list: data.data.infoList,
								timestamp: new Date().getTime()
							});
						}
						vm.messageScroll();
					}, function () {
						vm.off.load = false;
					});
				}

				doIt();
				window.MessageTimer = setInterval(function () {
					doIt();
				}, 10 * 1000);

			},
			messageScroll () {//消息滚动
				const vm = this;

				let index = vm.off.scrollIndex, maxIndex = Math.floor((vm.messageList.length) / 2);

				if (index < maxIndex - 1) {
					index++;
				} else index = 0;

				vm.off.scrollIndex = index;
			},
			slideJump (url, code, depiction) {//轮播跳转
				if (url) {
					Jsborya.pageJump({
						url: url,
						stepCode: code,
						depiction: depiction,
					});
				}
			},
			jumpBuyBag () {
				Jsborya.pageJump({
					url: "",
					stepCode: '2009',
					depiction: "加盟行牛",
				});
			},
			jumpYuantel () {
				Jsborya.pageJump({
					url: "../common/card/search.html?type=1",
					stepCode: '999',
					depiction: "远特专区",
				});
			},
			jumpUnicom () {
				Jsborya.pageJump({
					url: "../common/card/unicomPanel.html",
					stepCode: '999',
					depiction: "联通专区",
				});
			},
			jumpMessage () {//跳转到发现->实时咨询
				Jsborya.pageJump({
					url: 'discover/realTimeMessage.html',
					stepCode: '999',
					depiction: '实时资讯',
				});
			},
			jumpSearch (pageType) {
				const vm = this;

				let list = [], temp = [], depiction = '', url = '';

				if (pageType == 3) {//热门推荐
					list = vm.hotList;
					url = '../common/card/search';
					depiction = '热门推荐';
				} else if (pageType == 4) {//猜你喜欢
					list = vm.surmiseList;
					url = '../common/card/search';
					depiction = '猜你喜欢';
				} else if (pageType == 10) {//抢购专区
					depiction = '抢购专区';

					Jsborya.pageJump({
						url: `../common/card/activity.html?type=${pageType}`,
						stepCode: '999',
						depiction: depiction,
					});
					return false;
				} else if (pageType == 'quanyi') {//权益专区
					depiction = '权益专区';

					Jsborya.pageJump({
						url: `../common/card/quanyiPackageList.html`,
						stepCode: '999',
						depiction: depiction,
					});
					return false;
				}

				list.forEach((item) => {
					temp.push(item.phoneNum);
				});


				Jsborya.pageJump({
					url: `${url}.html?data=${BASE64.encode(JSON.stringify(temp.join(',')))}&type=${pageType}`,
					stepCode: '999',
					depiction: depiction,
				});
			},
			quanyiTypeFanYi (quanyiType) {
				let temp = '';

				switch (parseInt(quanyiType)) {
					case 1:
						temp = '吃鸡神卡'
						break;
					case 2:
						temp = '体育赛事'
						break;
					case 3:
						temp = '音视频'
						break;
					default:
						temp = '其它权益'
						break;
				}

				return temp;
			},
			setPhoneTag ({ initialMoney, faceMoney, belongType }) {
				if (initialMoney == faceMoney || (belongType == 2 || belongType == 3) // 大众预存卡直接显示抢
				) {
					return 'act'
				} else {
					return 'discount'
				}
			},
			initSlide () {//初始化轮播
				const vm = this;

				// 获取窗口宽高
				let { windowWidth } = getWindowWidthAndHeight();

				vm.headerHeight = windowWidth * 0.3 + 'px';
				vm.slide.h = windowWidth * 0.95 * (350 / 1182) + 'px';
				vm.slide.w = windowWidth * 0.95;
				vm.slidePlay();

				window.onscroll = debounce(300, function () {

					let top = document.documentElement.scrollTop || document.body.scrollTop;

					if (!vm.off.setHeader) {
						vm.off.setHeader = true;
						Jsborya.setHeader({
							title: '卡盟',
							frontColor: '#FFFFFF',
							backgroundColor: vm.slide.color[vm.slide.p.index],
						});
					}

					if (top == 0) vm.off.setHeader = false;//回到顶部
				})
			},
			slideSet (x) {//
				this.slide.style = {
					transform: `translate3d(${x}px,0px,0px)`,
				}
			},
			slidePlay: function () {//轮播自动播放
				const vm = this;

				vm.slide.timer = setInterval(function () {
					let index = vm.slide.p.index;
					if (index < 4) {
						index++;
					} else index = 0;


					vm.slide.p.index = index;
					vm.slideSet(-vm.slide.w * index);

					vm.slide.style.transitionDuration = '300ms';
					setTimeout(function () {
						vm.slide.style.transitionDuration = '0ms';
					}, 300);

				}, 3000)
			},
			slideStart: function (e) {//滑动开始
				e = e.changedTouches ? e.changedTouches[0] : e;

				this.slide.p.x = e.pageX;
				this.slide.p.y = e.pageY;
				this.slide.p.time = new Date().getTime();

				clearInterval(this.slide.timer);
			},
			slideMove: function (e) {//滑动中
				var event = e, slide = this.slide;
				e = e.changedTouches ? e.changedTouches[0] : e;
				var x = e.pageX - slide.p.x,
					y = e.pageY - slide.p.y;
				var isSlider = Math.abs(x) < Math.abs(y) ? 0 : 1;

				if (isSlider == 1 && slide.p.off) {
					event.preventDefault();
					this.slideSet((x - slide.w * slide.p.index));
				}
			},
			slideEnd: function (e) {//滑动结束
				const vm = this;

				e = e.changedTouches ? e.changedTouches[0] : e;
				var x = e.pageX - this.slide.p.x, index = this.slide.p.index;

				if (index < 5 && x < 0) {
					index++;
				} else if (x > 0 && index > 0) {
					index--;
				}

				vm.slideSet((-vm.slide.w * index));
				vm.slide.p.index = index;
				vm.slide.style.transitionDuration = '300ms';
				setTimeout(function () {
					vm.slide.style.transitionDuration = '0ms';
					//vm.p.off=true;
				}, 300);
				if (vm.slide.autoplay) vm.slidePlay();
			},
		}
	});


});